import { 
  Component, 
  OnInit,
  ViewChild,
  ElementRef,
  Renderer2,
  ViewEncapsulation,
  Input,
  AfterViewInit
} from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { Store } from  '@ngrx/store';
import { 
  MapState, 
  foldingSelector, 
} from '../../../store';

import { Folding } from '../../../models';
import { Layer } from '../../../class';
import { State } from '../../../../store';
import * as fromLayersSelectore from '../../../store/selectors/layer.selector';
import { LayerTableVisible, LayerTableHidden, LayerRemoveTable, LayerAddTable, LayerFeatureSelected, LayerFeatureDeselected } from '../../../store/actions/layers.action';

@Component({
  selector: 'ege-map-data-table',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ContainerComponent implements OnInit, AfterViewInit {

  dataTables$: Observable<Layer[]>;

  @Input() height: number|string = '400px';

  @ViewChild('dataTable') dataTable: ElementRef;
  @ViewChild('container') container: ElementRef;

  selectedIndex$: Observable<number>;
  isDown: boolean = false;

  constructor(
    private store: Store<State>,
    private mapStore: Store<MapState>,
    private renderer: Renderer2
  ) { }

  ngOnInit() {
    this.dataTables$ = this.store.select(fromLayersSelectore.getAllLayerTables);
    this.selectedIndex$ = this.store.select(fromLayersSelectore.getLastAddedTableIndex);
    this.store.select(foldingSelector.getFoldingResourceTree)
      .subscribe((data: Folding) => {
        this.rightPosition(data.visible ? true : false);
      });
  }

  ngAfterViewInit(): void {
    this.dataTableContainerHeight();
    this.initComponentPosition();
    this.store.select(fromLayersSelectore.getTableState)
      .subscribe((state) => this.componentVisible(state));
  }

  private dataTableContainerHeight(): void {
    const height: number = this.dataTable.nativeElement.offsetHeight - 41;
    const content: any = this.dataTable.nativeElement.querySelector('.ant-tabs-content');
    content && this.renderer.setStyle(content, 'height', `${height}px`);
  }

  initComponentPosition(): void {
    const bottom: number = (this.container.nativeElement.offsetHeight + 30) * -1;
    this.renderer.setStyle(
      this.container.nativeElement,
      'bottom',
      `${bottom}px`  
    );
    this.renderer.setStyle(this.container.nativeElement, 'visibility', 'visible');
  }

  private componentVisible(state: 'visible'|'hidden'|'removed'): void {
    const bottom: number = state === 'visible' ? 0 : (this.container.nativeElement.offsetHeight + 30) * -1;
    this.renderer.setStyle(this.container.nativeElement, 'transition', 'bottom 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)');
    this.renderer.setStyle(this.container.nativeElement, 'bottom', `${bottom}px`);
    if(state === 'hidden') {
      this.isDown = true;
    } else {
      this.isDown = false;
    }
  }

  private rightPosition(right: boolean = false): void {
    if(right) {
      this.renderer.addClass(this.dataTable.nativeElement, 'right-keep-block');
    } else {
      this.renderer.removeClass(this.dataTable.nativeElement, 'right-keep-block');
    }
  }

  closeTab(dataTable: Layer): void {
    this.store.dispatch(new LayerRemoveTable(dataTable.id));
  }

  onCollapse(): void {
    if(this.isDown) {
      this.store.dispatch(new LayerTableVisible());
    } else {
      this.store.dispatch(new LayerTableHidden());
    }
  }

  onTableRowMouseover($event: any, layerId: string): void {
    this.store.dispatch(new LayerFeatureSelected({ layerId: layerId, featureId: $event['FEATURE_ID'] }));
  }

  onTableRowMouseout($event: any, layerId: string): void {
    this.store.dispatch(new LayerFeatureDeselected({ layerId: layerId, featureId: $event['FEATURE_ID'] }));
  }

}
